<template>
  <div ref="chartBar" class="chart-bar"> </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { PropType, reactive } from 'vue';
  import * as echarts from 'echarts';

  // 获取 props
  const props = defineProps({
    config: {
      type: Object as PropType<any>,
    },
  });

  const { config } = reactive(props);
  console.log('🚀 ~ file: ChartBar.vue ~ line 18 ~ config', config);
  const chartBar = ref<HTMLElement>();
  const charts = ref<any>();

  onMounted(() => {
    charts.value = echarts.init(chartBar.value!);
    charts.value.setOption({
      title: { text: '降水量' },
      tooltip: {},
      xAxis: {
        data: ['6-3', '6-4', '6-5', '6-6', '6-7', '6-8'],
      },
      yAxis: {},
      series: [
        {
          name: '降水量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
        {
          name: '最高温度',
          type: 'line',
          data: [18, 24, 36, 20, 30, 21],
        },
        {
          name: '最低温度',
          type: 'line',
          data: [12, 14, 16, 14, 22, 11],
        },
      ],
    });
  });
</script>

<style lang="scss" scoped>
  .chart-bar {
    height: 100%;
    width: 100%;
  }
</style>
